@extends('admin.layouts.topbar')

@section('AsideBar')
<div class="logobox">
	<img :src="logo_img_src" alt="" :width="logo_width" height="60">
</div>
<el-menu class="left-menu"
	:collapse="isCollapse" background-color="#2f4050"
	text-color="#a7b1c2" unique-opened
	active-text-color="#409EFF">
	@foreach (session('menu') as $menu)
	<el-submenu index="{{$menu['id']}}">
		<template slot="title">
			<i class="{{$menu['icon']}}"></i>
			<span slot="title">{{$menu['name']}}</span>
		</template>
		@foreach ($menu['children'] as $m)
			@if (empty($m['children']))
			<a href="{{url('admin/'.$m['src'])}}">
				<el-menu-item index="{{$menu['id']}}-{{$m['id']}}">{{$m['name']}}</el-menu-item>
			</a>
			@else
			<el-submenu index="@{{index}}-{{$m['id']}}">
				<span slot="title">{{$m['name']}}</span>
				@foreach ($m['children'] as $v)
				<a href="{{url('admin/'.$v['src'])}}">
					<el-menu-item index="@{{index}}-{{$m['id']}}-{{$v['id']}}">{{$v['name']}}</el-menu-item>
				</a>
				@endforeach
			</el-submenu>
			@endif
		@endforeach
	</el-submenu>
	@endforeach
	<li align="right">
		<el-button type="primary" class="col-btn" :icon="collapse_icon" @click="changeCollapse" circle size="mini"></el-button>
	</li>
</el-menu>
<script type="text/javascript">
var AsideBar = new Vue({
	el:"#AsideBar",
	data:{
		isCollapse: true,
		collapse_icon:"el-icon-arrow-right",
		layout_left_class:"layout-left-mini",
		layout_right_class:"1",
		logo_src:"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1846620445,357882893&fm=173&app=49&f=JPEG?w=218&h=146&s=C5B534D4C02655070511394A0300C090",
		mini_logo_src:"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=672363532,3745640363&fm=173&app=49&f=JPEG?w=218&h=146&s=64A288F08A1007DA9821702D0300C040",
		logo_img_src:"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=672363532,3745640363&fm=173&app=49&f=JPEG?w=218&h=146&s=64A288F08A1007DA9821702D0300C040",
		logo_width:"64",
		token:"{{ csrf_token() }}",
		menuData:"",
	},
	methods: {
		changeCollapse() {
			if(this.isCollapse){
				this.isCollapse = false;
				this.collapse_icon = "el-icon-arrow-left";
				this.layout_left_class = "layout-left";
				this.logo_img_src = this.logo_src;
				this.logo_width = '220';
				$("#layout-right").addClass("layout-right").removeClass('layout-right-mini');
			}else{
				this.isCollapse = true;
				this.collapse_icon = "el-icon-arrow-right";
				this.layout_left_class = "layout-left-mini";
				this.logo_img_src = this.mini_logo_src;
				this.logo_width = '64';
				$("#layout-right").addClass("layout-right-mini").removeClass('layout-right');
			}
		}
	}
});
</script>
@endsection
